<template>
  <view class="user-center">
    <view v-if="userCenterStore.loading" class="user-center__loading">
      <loading text="加载中..." />
    </view>

    <view v-else-if="userCenterStore.userInfo" class="user-center__content">
      <user-info :userInfo="userCenterStore.userInfo" />

      <view class="user-center__menu">
        <view class="user-center__menu-item" @tap="handleMenuItemClick('orders')">
          <text class="user-center__menu-icon iconfont icon-order"></text>
          <text class="user-center__menu-text">我的订单</text>
          <text class="user-center__menu-arrow">></text>
        </view>

        <view class="user-center__menu-item" @tap="handleMenuItemClick('address')">
          <text class="user-center__menu-icon iconfont icon-address"></text>
          <text class="user-center__menu-text">收货地址</text>
          <text class="user-center__menu-arrow">></text>
        </view>

        <view class="user-center__menu-item" @tap="handleMenuItemClick('settings')">
          <text class="user-center__menu-icon iconfont icon-settings"></text>
          <text class="user-center__menu-text">设置</text>
          <text class="user-center__menu-arrow">></text>
        </view>
      </view>

      <view class="user-center__actions">
        <ui-button type="primary" block @click="handleEditProfile">编辑资料</ui-button>
      </view>
    </view>

    <view v-else class="user-center__error">
      <text>获取用户信息失败</text>
      <ui-button type="primary" size="small" @click="userCenterStore.getUserInfo">重试</ui-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import UiButton from '@/components/ui/Button.vue';
import Loading from '@/components/common/Loading.vue';
import UserInfo from './components/UserInfo.vue';
import { useUserCenterStore } from './store';

// 使用 pinia store
const userCenterStore = useUserCenterStore();

// 初始化数据
onMounted(() => {
  userCenterStore.getUserInfo();
});

// 页面卸载时重置状态
onUnmounted(() => {
  userCenterStore.resetState();
});

// 菜单项点击事件
const handleMenuItemClick = (type: string) => {
  console.log(`Menu item clicked: ${type}`);
  // 这里可以添加导航逻辑
};

// 编辑资料点击事件
const handleEditProfile = () => {
  console.log('Edit profile clicked');
  // 这里可以添加导航逻辑
};
</script>

<style lang="scss">
.user-center {
  min-height: 100vh;
  background-color: #f5f5f5;

  &__loading,
  &__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: 20px;
  }

  &__menu {
    margin-top: 20px;
    background-color: #fff;
  }

  &__menu-item {
    display: flex;
    align-items: center;
    padding: 30px 20px;
    border-bottom: 1px solid #f5f5f5;
  }

  &__menu-icon {
    font-size: 40px;
    color: var(--primary-color);
    margin-right: 20px;
  }

  &__menu-text {
    flex: 1;
    font-size: 30px;
    color: #333;
  }

  &__menu-arrow {
    font-size: 30px;
    color: #ccc;
  }

  &__actions {
    margin-top: 40px;
    padding: 0 20px;
  }
}
</style>
